<template>
  <container>
    <!-- 类似于img标签 -->
    <sprite :texture="bulletImg"></sprite>
  </container>
</template>

<script>
import bulletImg from '@/assets/bunny-self.png'
import { game } from '@/game/index.js'
import { reactive } from 'vue'

export default {
  setup() {
    return {
      bulletImg
    }
  }
}

export function useBullets() {
  const width = 61
  const height = 99

  const bullets = reactive([])

  // 添加子弹
  const addBullet = info => {
    bullets.push({ ...info, width, height })
  }

  // 子弹向上移动
  function move() {
    const speed = 5
    game.ticker.add(() => {
      bullets.forEach(bullet => {
        bullet.y -= speed
      })
    })
  }

  move()

  return {
    bullets,
    addBullet
  }
}
</script>
